Intro

보안에 민감한 많은 회사들은 다양한 이유로 인해 인터넷 망에 제한을 겁니다. 흔히 인트라넷이라고 부르는 네트워크 형태를 취하는 회사들이 정말 많습니다. 그러면 어떻게 NPM Registry에서 패키지들을 다운받아야 하느냐 라는 의문이 드실 수 있을겁니다.

SonaType Nexus Repository 홈페이지

최근에 저희 팀에서는 Sonatype Nexus Repository를 채택 하였고, 다양한 개발환경을 구축해서 사용할 수 있는 환경이 구축되었습니다.

사실 이전에도 사용하던 Artifactory가 있었으나, 오픈소스 버전 만으로도 필요한 기능들을 사용할 수 있다는 점에 Nexus Repository를 채택했습니다.

이번 기회에 기술들을 다양하게 쓰는 팀으로 탈바꿈 해 보고자 하는 팀의 방향성에 따라 Vue.js 를 도입 해 보았습니다.

저는 풀스택 개발자는 없다 라고 생각하는 편입니다. 왜냐면 프론트엔드와 백엔드를 나누는 게 큰 의미가 없다 생각하기 때문입니다.

https://leerob.io/blog/product-engineers

https://careerly.co.kr/comments/89655?from=search-result&fromArea=tab-all-comment

최근 커리어리에서 재밌는 글들을 읽어보았는데, 백엔드 프론트엔드가 아니라 프로덕트 엔지니어와 플랫폼 엔지니어로 구분해야 한다는 글 들이 최근 들어 자주 올라오고 있습니다.

프론트엔드와 백엔드의 경계를 나누고 각자의 영역을 침범하지 않는 형태가 아니라, 개발 방향성에 따라 자신의 포지션을 구분해야 한다는 내용인데, 개인적으로는 정말 공감하는 편입니다.

사실 저도 작년 까지는 백엔드 개발자의 영역에서 크게 넘어가지 않으려는 방향성을 가졌으나, 올해 들어서 여러가지 이유로 프론트엔드 개발 또한 같이 진행 해 보았습니다. 제가 지금까지 내린 결론은 난이도의 차이는 없다 입니다.

UI/UX 기획자도 디자이너도 아닌 개발자 입장에선 화면에 얼마나 컴포넌트가 최적화 된 채로 랜더링 되고, 소프트웨어로써 허점이 없는지를 고민해야 한다고 생각합니다. 그런 관점에서 봤을 때 프론트엔드 개발과 백엔드 개발을 분리 해 봐야 의미는 없고, 오히려 두 영역을 잘 이해해야 자신의 영역에 대해 전문성을 가질 수 있다고 생각했습니다. (어쨌든 소프트웨어 개발이라는 관점에서 볼 때 두 업무의 난이도 차이는 크게 없다고 느낍니다.)

최근에는 Nexus Repository 가 구축 된 기념으로 팀에서 프론트엔드 작업을 맡게 되었고, Vue.js 를 채택했습니다. 이번 포스팅에서는 Vue.js를 채택하게 된 과정과 이유에 대해 이야기 해 보려고 합니다.

백엔드 개발자로써 프론트엔드 작업을 한다는 것?

백엔드 개발만 주로 진행하시던 분들이 프론트엔드 개발을 하면서 많이들 하시는 (저도 했던) 말들은, 생각보다 신경써야 할 게 훨씬 많아서 적응하는 데 시간이 걸린다는 것 이었습니다.

Spring Framework 위에서 어지간한 라이브러리들은 탄탄하게 지원되던 환경과는 달리, 생각보다 의존해야 할, 알아야 할 패키지들이 많다는 것에 많이들 놀라십니다.

당장 날 자바스크립트만 가지고 프론트엔드를 개발하라고 하면 JQuery부터 찾는 게 현실이니까요. 순수 Javascript만 사용하는 웹 개발이 불가능 하다는 의미는 아닙니다. 그 만큼 JS를 사용하기 위해 많은 도구를 사용 할 필요가 있다는 의미죠.

그리고 React 같은 라이브러리를 사용하게 되는 경우, React에 최적화 된 문법이나 지식들을 이해하는 데 시간이 걸린다고 합니다. 생각보다 진입장벽을 겪게 되는 샘이죠.

물론 백엔드 개발자들이 항상 백엔드 로직만 개발 했던 건 아닙니다. JQuery 나 JSP, Thymeleaf, Mustache 등으로 View 단을 개발 하는 작업도 백엔드의 역할이죠.

그럼 백엔드 개발자들에게 가장 익숙한 프론트엔드 개발 방법은 곧, JSP나 Thymeleaf 를 사용 할 때 처럼 개발하는 것이라 할 수 있겠죠. React는 이런 면에서 백엔드 개발자들이 당장 사용하기엔 진입장벽으로 인해 생산성 저하가 일어날 수 있다는 리스크를 가지고 있다고 생각합니다.

JSP나 Thymeleaf를 사용 할 때 처럼 개발한다는 건 무슨 의미일까요? Html, CSS, Javascript 영역을 분리하는 패턴, 즉 정해진 패턴대로 작업하는 것이라고 봅니다.

리액트의 최고 장점은 자유도라고 생각합니다. Javascript 만 잘 이해하고 있다면, 함수형 컴포넌트를 생성해서 여러곳에서 돌려가며 써먹을 수 있죠. 문제는 당장 옛날 방식으로 웹을 개발하거나 백엔드를 하던 분들 에게는 이런 장점이 단점으로 보일 수 있다는 것입니다.
그래서 저희 팀은 Vue.js 를 통해 프론트엔드 도입의 리스크를 줄이고자 했습니다. 백엔드 개발자들 위주로 이뤄진 팀이다보니, 프론트엔드를 쉽게 도입할 수 있는 방향성이 매우 중요했습니다.

개인적으로는 React.js 에 대한 단점을 고민 해 볼 좋은 기회였다고 생각합니다. 전 너무나 당연하다는 듯이 React를 써 왔었고, React는 여전히 많이 쓰이고 좋은 라이브러리지만, 모두가 React를 이해하고 있을 때 좋은 선택지라는 생각이 들었습니다.

Vue.js 의 장단점

가장 장점이라고 느꼈던 건, 코드를 작성하는 방식에 대한 자유도가 제한되어있다는 점입니다. 프론트엔드 개발을 처음 해 보는 분들에겐 최고의 장점이 아닐까요?

React는 저 또한 저만의 스타일대로 작업을 할 정도로 자유도가 높습니다. 전 컴포넌트 간에 상하관계 상관없이 Props를 통해 함수를 전달해서 쓰는 것을 좋아하지만, Vue.js 에서는 양방향 통신을 지양합니다. 개인적으로는 아쉬울 수 있지만, 팀의 입장에서 봤을 때는 오히려 방법이 단순해지니 생산성에 이점을 가질 수 있습니다.

또한 Vue-router, Pinia 등 라우팅 라이브러리와 상태관리 라이브러리의 사용법이 너무나 간단하고 직관적이었습니다. beforeEach, 즉 라우팅 이전에 실행되는 인터셉터를 커스텀 하는 방식으로 페이지 접근 제한 또한 쉽게 구현할 수 있습니다. 제가 이미 React에 익숙해서 그런 진 모르겠지만, 시작한 지 몇시간 만에 간단한 목업 페이지를 만들 수 있을 정도였습니다.

상태관리 라이브러리 Pinia 같은 경우는, 아직 Vue.js의 모든 문법을 이해하지는 못해서 composition api 를 기계적으로 외워서 쓰고는 있지만, 그럼에도 불구하고 Redux를 셋업하는 것 보다 훨씬 간편하게 사용할 수 있었습니다.
React에는 Recoil 이라는 선택지도 있었지만, DevTool 지원이 아쉬웠고 React Hook 처럼 쓸 수 있지만, 반대로 React의 Hook 영역 외에는 사용하기 어렵다는 단점이 있었습니다.

Pinia는 Redux 만큼 강력하고 Recoil 만큼 사용하기 쉽지만, 더욱 직관적이라는 장점을 가지고 있었습니다.

물론 단점도 존재합니다. 아직 많은 유저들이 사용하고 있지 않고, javascript bundle의 크기가 큰 편이므로 모바일 환경이나 네트워크가 느린 환경이라면 성능 이슈가 생길 수도 있습니다.

하지만, 당장 프론트엔드 개발 경험이 부족하거나 페이지의 규모가 크지 않은 상황에서 빠르게 프론트엔드를 개발할 수 있는 좋은 방법이라고 생각합니다.

Outro

현재 Vue.js와 Spring Boot를 통해 백오피스 개발 업무를 더욱 편하게 하고 있습니다. 제 기준에서 React를 사용할 때에 비해 훨씬 빠르게 결과물을 볼 수 있었습니다.
게다가 SPA를 도입한 만큼 페이지가 렌더링 되거나 라우팅이 일어날 때 리프레쉬가 일어나지 않으므로 일단 로딩 되고나면 훨씬 서버단에 적은 요청을 보낼 수 있다는 이점을 가질 수 있었습니다.
Thymeleaf와 JQuery를 통해 웹을 개발하던 선례와 달리, 페이지가 이동 될때마다 서버에게 요청을 보내서 css, js, img 파일을 전달받을 필요도 없어졌습니다.

Vue.js 덕분에 SPA의 장점, 좀 더 쉬운 프론트엔드 개발 방법 등 많은 장점들을 활용해서 기존에 개발 되었던 백오피스에 비해 개선 된 퍼포먼스를 보이는 결과물을 만들어 낼 수 있었습니다.
물론 여전히 React.js 를 많이 쓰고 React.js의 장점이 필요 한 상황도 분명 있을것입니다. React 만 제대로 쓸 수 있어도 모바일 앱 개발에 대한 진입장벽이 낮아질 수 있으니까요. 페이지가 다이내믹 한 UX를 가지고 있다면, 또 재사용해야 할 컴포넌트가 매우 많다면 React.js를 고려해야 할 수도 있습니다.

하지만 꼭 그런 상황이 아니라면, Vue.js 를 도입해서 생산성을 높히는 게 더 좋지 않을까 라는 생각이 들었습니다. 특히 사내 백오피스 개발 건이라면 개발 속도와 엔지니어링 비용이 중요해지니까요.